<template>
  <el-card>
    <div slot="header">
      <span>痛点分析</span>
    </div>
    <ve-bar :colors="colors" :data="chartData" :settings="chartSettings"></ve-bar>
  </el-card>
</template>
<script>
  import { getPainAmount } from "@/api/stat";
  export default {
    data() {
      this.colors = ['#c23531','#2f4554'],
      this.chartSettings =  {
        labelMap: {
          rate1: '非常不满',
          rate2: '不满意'
        },
        stack: {
          'xxx': ['rate1', 'rate2']
        }
      }
      return {
        chartData: {
          columns: ['category', 'rate1', 'rate2'],
          rows: []
        },
        // branchId: sessionStorage.getItem('selected_branch_id')
      }
    },
    computed: {
      branchId() {
        // this.initData()
        console.log('computed...');
        console.log(this.$store.state.app.selectedBranchId);
        
        return sessionStorage.getItem('selected_branch_id')
        // return this.$store.state.app.selectedBranchId
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        let data = {
          shopId: sessionStorage.getItem('selected_shop_id'),
          branchId: sessionStorage.getItem('selected_branch_id')
        }
        getPainAmount(data).then(res => {
          this.chartData.rows = res.data.data
          console.log(this.chartData.rows);
          
        })
      }
    }
  }
</script>
